<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>答题完毕页面</title>
	
    <link href="${root}css/square/green.css" rel="stylesheet">
    
    <link rel="stylesheet" href="${root}css/common.css"/>
    <link rel="stylesheet" href="${root}css/test.css"/>
</head>
<body>
<!--:include("/inc/course/header.html"){}  -->
<script src="${root}js/icheck.min.js"></script>
<!-- 左侧练习题-->
<section >
<div class="test_left">
<h1 style="font-size: 22px;"><b>${course.title!}</b></h1><br/>
    <ul id="test_list">
        <!-- 题目根据获取的后台数据动态生成---------->
    </ul>
</div>
<!-- 右侧状态显示-->
<div class="test_right">
    <!-- 答题剩余时间 -->
    <div class="test_time">
        <div class="time">
            <i class="iconfont icon-time"></i>&nbsp;<span>答题时间</span>
            <div class="time-item" style="display: inline-block; font-size: 20px">
                <strong id="minute_show">00分</strong>
                <strong id="second_show">00秒</strong>
            </div>
            
        </div>
        <div class="count">
            <i class="iconfont icon-shuxie"></i>&nbsp;<span>答题数量</span>&nbsp;<em class="idno">0</em><em>/</em><em class="allidno"></em>
        </div>
    </div>
    <!-- 题目编号-->
    <div class="test_num">
        <!-- 动态生成a标签------------------------------->
    </div>
    <!--交卷-->
    <div class="test_sub">
        <a id='btn' href="#">报考成绩</a>
    </div>
</div>
</section>
<script>

    //页面加载获取后台数据动态渲染到页面上
    $(function () {
        //需求：
        // 1、点击按钮 向后台异步请求数据
        // 2、后台获取数据 并返回给 客户端
        // 3、 浏览器 拿到数据后 ，按照一定的格式 展示出来
        //实例化
        
                //后台返回string格式的数据
                //var data = 
       
                //  把string格式的后台数据转换成数组data
                
                var result=${obj.result};
                var a=new Date('${obj.start_time}')
                var b=new Date('${obj.end_time}')
                console.log(result);
                console.log	(a);
                
                console.log	(b);
                document.querySelector('.allidno').innerHTML=10;
                document.querySelector('.idno').innerHTML=10;
                //  创建一个模板   遍历数组 用li标签的形式来展示大量数据
                var html = '';
                //外层循环获取一共有多少道题
              	
                for (var i = 0; i < result.length; i++) {

                    html += '<li id="test_' + result[i].name + '">';
                    html += '<p>' + result[i].title + '</p>';
                    //内层循环获取每道题的有几个选项
                    //传递过来的对象 list是json 字符串格式，所以需要改变一下
                    var list=[];
                    try {
                    	list=JSON.parse(result[i].list);
					} catch (e) {
						list=result[i].list;
					}
       				
                   
                    for (var j = 0; j < list.length; j++) {
                  
                        html += ' <div class="check" id="' + i + 'test_' +list[j].value + '">';

                        html += '<input class="' + i + 'test_' + list[j].value + '"  type="' + result[i].type + '" name="' + result[i].name + '" value="' + list[j].value+'"/>';

                        html += '<lable for="test_' + list[j].value + '">' + list[j].lable + '</lable>';
                        html += ' </div>';

                    }

                    html +=' <div class="question">';
                    html +='<em class="iconfont icon-zhijiaosanjiaoxing"></em>'
                    html +='<i class="iconfont icon-xiaolian"> 答对了 </i>';
                    html +='<section><span id="answer'+i+'">答案：'+result[i].val+'</span><span   class=" test_' + result[i].name + ' answerclick iconfont icon-down-trangle">答案解析</span></section>';
                    html +='</div>';

                    html +=' <div class="answer hide" id="answer_test_'+ result[i].name + '">';
                    html +=' <p>钱本无罪，它只是商品流通的介质.钱本无罪，它只是商品流通的介质.钱本无罪，它只是商品流通的介质.钱本无罪，它只是商品流通的介质.</p>';
                    html +='</div>';


                    html += ' <div>';
                    html += '<span>';
                    html += '<a href="#">反馈</a> | 题目来源：微医教育';
                    html += ' </span>';
                    html += ' </div>';

                    html += '</li>';


                }


                //把动态生成的html模板添加到页面的ul标签中
                document.getElementById("test_list").innerHTML = html;

                //动态生成右侧的题号
                var html1 = '';
                for (var i = 0; i < result.length; i++) {
                    html1 += '<a data-numid="' + result[i].name + '" href="#test_' + result[i].name + '">' + result[i].name + '</a>';
                }
                //把动态生成的html1模板添加到页面的ul标签中
                document.querySelector('.test_num').innerHTML = html1;
                //模板添加成功之后初始化iCkeck插件的input框样式
                $('input').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                    increaseArea: '20%' // optional
                });
                //禁止input点击
                $('input').iCheck('disable');

                for (var i = 0; i < result.length; i++) {
                    $('.' + i + 'test_'+result[i].uval+'').iCheck('check');

                    var txt=$('#answer'+i+'').html();
                    console.log(txt);

                    if(txt=='答案：0'){
                        $('#answer'+i+'').html("答案：正确");
                    }
                    else if(txt=='答案：1'){
                        $('#answer'+i+'').html("答案：错误");
                    }

                    if(result[i].uval!==result[i].val){
                        $('#test_'+result[i].name+'').addClass('error');
                        $('#test_'+result[i].name+' .question i').css('color','red');
                        $('#test_'+result[i].name+' .question i').html("答错了");
                        $("a[data-numid = " + result[i].name + "]").css('color','red');
                    }
            }

                //点击答案解析 显示和隐藏当前这题的答案解析的内容，以及更换向上向下的字体图标
                $('.answerclick').on('click', function () {
                    var answerid=$(this).context.classList[0];
                    $(this).toggleClass('icon-down-trangle-copy-copy');
                    $('#answer_'+answerid+'').toggle();
                })
    })


</script>


</body>
</html>